/*
 * @Description:
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2022-11-11 16:30:41
 * @LastEditors: 韩富贵 hanxzi@163.com
 * @LastEditTime: 2023-01-04 12:00:17
 */
import React from 'react';
import {Button, Form, Input, Pagination, Select} from 'antd';
import styles from './index.module.less';

const {useForm} = Form;

export interface FormListProps {
    list: {
        [key: string]: any;
    }[];
    style?: any;
    height?: number;
    columns?: {
        label?: string;
        name: string;
        type: string;
        width?: any;
        options?: {
            value: any;
            name: string;
            [key: string]: any;
        }[];
        placeholder?: string;
        [key: string]: any;
    }[];
    initialValues?: any;
    formLayout?: any;
    pagination?: any;
    spaceGap?: number;
    renderList: React.FC<any>;
    onSubmit: (e: any) => void;
    onReset?: (e: any) => void;
    onClickItem?: (e: any) => void;
    onClickListItem?: (e: any, type: string) => false | undefined;
    renderTitle?: React.FC<any>;
    reset?: boolean;
}

const BasicList: React.FC<FormListProps> = (props) => {

    const {
        height,
        pagination,
        onSubmit,
        onClickItem,
        onClickListItem,
        list,
        style,
        columns,
        spaceGap = 20,
        formLayout = 'inline',
        initialValues,
        renderList: RenderItem,
        renderTitle: Title,
        reset = false,
    } = props;
    const [form] = useForm();

    const onFinish = () => {
        const params = form?.getFieldsValue();
        onSubmit(params);
    };

    const onReset = () => {
        form.resetFields();
        const params = form?.getFieldsValue();
        onSubmit(params);
    };

    const onChangePagination = (page: number, pageSize: number) => {
        const params = form?.getFieldsValue();
        onSubmit({
            page,
            pageSize,
            ...params,
        });
    };
    let formItemNode: any = [];
    if (columns) {
        columns.forEach((ele: any, index: number) => {
            if (ele.type == 'input') {
                formItemNode.push(
                    <Form.Item name={ele.name} label={ele?.label || ''} key={index}>
                        <Input onPressEnter={onFinish} allowClear={true} size={"small"}
                               placeholder={ele?.placeholder || ''}
                               style={{width: ele?.width}}/>
                    </Form.Item>,
                );
            }
            if (ele.type == 'select') {
                formItemNode.push(
                    <Form.Item name={ele.name} label={ele?.label || ''} key={index}>
                        <Select
                            size={"small"}
                            style={{width: ele?.width}}
                            placeholder={ele?.placeholder || ''}
                            allowClear={true}
                            onChange={onFinish}
                            options={ele?.options || []}
                        />
                    </Form.Item>,
                );
            }
        });
    }
    // @ts-ignore
    // @ts-ignore
    return (
        <div className={styles['form-layout']} style={style}>
            <Form form={form} layout={formLayout} initialValues={initialValues}>
                {!!columns ? (
                    <div className={styles['form-item']}>
                        {formItemNode}
                        <Button size={'small'} type={"primary"} onClick={() => onFinish()}>
                            搜索
                        </Button>
                        {reset ? (
                            <Button size={'small'} className={'ml-20'} onClick={() => onReset()}>
                                重置
                            </Button>
                        ) : null}
                    </div>
                ) : null}
            </Form>
            {Title && <Title/>}
            <div className={styles['form-list']} style={{height: height, gap: `${spaceGap}rem`}}>
                {list?.length > 0 &&
                    list?.map((item: any, index: number) => (
                        <div
                            className={styles['form-list-item']}
                            key={index}
                            onClick={() => (onClickItem ? onClickItem(item) : null)}
                        >
                            <RenderItem
                                index={index}
                                item={item}
                                onClickListItem={onClickListItem}
                            />
                        </div>
                    ))}
            </div>

            {!!pagination ? (
                <div className={styles['pagination']}>
                    <Pagination size={"small"} {...pagination} onChange={onChangePagination}/>
                </div>
            ) : null}
        </div>
    );
};
export default BasicList;
